<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院综合管理仪表板</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="integrated-dashboard.css">
    <link rel="stylesheet" href="dashboard.css">
    <script src="integrated-dashboard.js" defer></script>
    <style>
        .menu-item {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .menu-item:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="profile">
                <div class="profile-image">
                    <img src="./images/man.png" alt="Profile Picture">
                </div>
                <div class="profile-info">
                    <p>张医生<br>管理员</p>
                </div>
                <div class="collapse-button">
                    <img src="images/right-arrows.png" alt="Collapse">
                </div>
            </div>
            
            <div class="menu-item active" onclick="window.location.href='dashboard.html'">
                <div class="dashboard-icon">
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-box"></div>
                    <div class="dashboard-circle"></div>
                </div>
                <span class="menu-text">仪表板</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/appointment.png" alt="Appointment">
                </div>
                <span class="menu-text">预约管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/doctor.png" alt="Doctor">
                </div>
                <span class="menu-text">医生管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='patient-add.html'">
                <div class="icon-container">
                    <img src="images/patient.png" alt="Patients">
                </div>
                <span class="menu-text">患者管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/setting-lines.png" alt="Settings">
                </div>
                <span class="menu-text">系统设置</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='payment.html'">
                <div class="icon-container">
                    <img src="images/security-payment.png" alt="Payments">
                </div>
                <span class="menu-text">支付管理</span>
            </div>
            
            <div class="menu-item" onclick="window.location.href='dashboard.html'">
                <div class="icon-container">
                    <img src="images/team.png" alt="Team">
                </div>
                <span class="menu-text">团队管理</span>
            </div>
            
            <div class="menu-item logout" onclick="window.location.href='index.html'">
                <div class="icon-container">
                    <img src="images/power.png" alt="Logout">
                </div>
                <span class="menu-text">退出登录</span>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div class="profile-section">
                    <img src="images/file.png" alt="File Icon" class="file-icon">
                    <h1>仪表板</h1>
                </div>
            </div>
            
            <div class="content-section">
                <!-- 通知横幅 -->
                <div class="notification-banner">
                    <div class="banner-icon">
                        <img src="images/dashboard/level-up.png" alt="Level Up">
                    </div>
                    <div class="banner-content">
                        <h2>医院管理系统专业版</h2>
                        <p>升级到专业版，解锁更多高级功能，提升医院管理效率</p>
                    </div>
                    <button class="upgrade-btn">立即升级</button>
                </div>
                
                <!-- Dashboard Summary Cards -->
                <div class="summary-cards">
                    <div class="summary-card">
                        <div class="card-icon">
                            <img src="images/dashboard/icon-opd.png" alt="OPD">
                        </div>
                        <div class="card-content">
                            <h3>250</h3>
                            <p>今日门诊</p>
                        </div>
                    </div>
                    
                    <div class="summary-card">
                        <div class="card-icon">
                            <img src="images/dashboard/icon-relieved.png" alt="Relieved">
                        </div>
                        <div class="card-content">
                            <h3>89</h3>
                            <p>今日出院</p>
                        </div>
                    </div>
                    
                    <div class="summary-card">
                        <div class="card-icon">
                            <img src="images/dashboard/icon-patient.png" alt="In Patient">
                        </div>
                        <div class="card-content">
                            <h3>300</h3>
                            <p>今日住院</p>
                        </div>
                    </div>
                    
                    <div class="summary-card">
                        <div class="card-icon">
                            <img src="images/dashboard/icon-ventilator.png" alt="Ventilator">
                        </div>
                        <div class="card-content">
                            <h3>52</h3>
                            <p>呼吸机使用</p>
                        </div>
                    </div>
                </div>
                
                <!-- Charts Section -->
                <div class="charts-section">
                    <div class="chart-container">
                        <h2>医院调查</h2>
                        <div class="chart-placeholder">
                            <img src="images/dashboard/chart-line-pink.svg" alt="Pink Chart Line">
                            <img src="images/dashboard/chart-line-purple.svg" alt="Purple Chart Line">
                        </div>
                        <div class="chart-legend">
                            <span class="legend-item">新患者</span>
                            <span class="legend-item">老患者</span>
                        </div>
                    </div>
                    
                    <div class="chart-container">
                        <h2>常见疾病统计</h2>
                        <div class="chart-placeholder">
                            <p>常见疾病图表将显示在此处</p>
                        </div>
                    </div>
                </div>
                
                <!-- Appointment Table -->
                <div class="appointment-table">
                    <h2>预约列表</h2>
                    
                    <div class="table-container">
                        <div class="table-header-row">
                            <div class="header-cell">#</div>
                            <div class="header-cell">患者姓名</div>
                            <div class="header-cell">指定医生</div>
                            <div class="header-cell">日期</div>
                            <div class="header-cell">疾病</div>
                            <div class="header-cell">操作</div>
                        </div>
                        
                        <div class="table-row">
                            <div class="cell">001</div>
                            <div class="cell">王小明</div>
                            <div class="cell">李医生</div>
                            <div class="cell">2022年1月12日</div>
                            <div class="cell">
                                <span class="disease-tag">发热</span>
                            </div>
                            <div class="cell actions">
                                <button class="action-btn edit"><img src="images/edit-button.png" alt="Edit"></button>
                                <button class="action-btn delete"><img src="images/trash.png" alt="Delete"></button>
                            </div>
                        </div>
                        
                        <div class="table-row">
                            <div class="cell">002</div>
                            <div class="cell">李小红</div>
                            <div class="cell">张医生</div>
                            <div class="cell">2022年1月12日</div>
                            <div class="cell">
                                <span class="disease-tag">霍乱</span>
                            </div>
                            <div class="cell actions">
                                <button class="action-btn edit"><img src="images/edit-button.png" alt="Edit"></button>
                                <button class="action-btn delete"><img src="images/trash.png" alt="Delete"></button>
                            </div>
                        </div>
                        
                        <div class="table-row">
                            <div class="cell">003</div>
                            <div class="cell">刘小华</div>
                            <div class="cell">王医生</div>
                            <div class="cell">2022年1月12日</div>
                            <div class="cell">
                                <span class="disease-tag">发热</span>
                            </div>
                            <div class="cell actions">
                                <button class="action-btn edit"><img src="images/edit-button.png" alt="Edit"></button>
                                <button class="action-btn delete"><img src="images/trash.png" alt="Delete"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 